<!--
 * @Author: CC-TSR
 * @Date: 2021-01-21 14:21:44
 * @LastEditTime: 2021-01-22 10:13:29
 * @LastEditors: xiejiancheng1999@qq.com
 * @Description: 
 * @FilePath: \前端\src\components\MapTree\LineCheckResult.vue
 * @可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="model">
    <div class="title">
      <Button
        size="small"
        style="display: inline-block; padding: 0"
        id="back"
        type="text"
        @click="backToCheck"
        ><Icon type="md-arrow-round-back" />返回
      </Button>
      <h3 style="text-align: center">控制线检测分析结果</h3>
      <Button id="export" type="text" @click="showPdf">
        <Icon type="ios-download" />报表详情
      </Button>
    </div>
    <div class="tabs">
      <Row>
        <Col span="24">
          <Button
            :class="{ 'active-button': active_btn === -1 }"
            style="width: 100%; padding: 0; border-radius: 0"
            type="info"
            ghost
            @click="showLayerDetailRes(-1)"
          >
            分 析 结 果 速 览
          </Button>
        </Col>
      </Row>
      <Row>
        <Col span="6" v-for="result in resdata.Results" :key="result.layer">
          <Button
            style="width: 100%; padding: 0; border-top: none; border-radius: 0"
            :class="[
              {
                'center-Button':
                  result.layer === 1 ||
                  result.layer === 2 ||
                  result.layer === 3,
              },
              { 'active-button': active_btn === result.layer },
            ]"
            type="info"
            @click="showLayerDetailRes(result.layer)"
            ghost
            >图层{{ result.layer }}</Button
          >
        </Col>
      </Row>
    </div>
    <div v-show="active_btn === -1" class="result">
      <div class="table">
        <Table
          size="small"
          border
          :columns="columnsTitle"
          no-data-text=""
          max-height="400"
          :data="resdata.Results"
          @on-row-click="showLayerDetailRes"
        />
      </div>
      <div class="pie">
        <div id="main"></div>
      </div>
    </div>
    <div class="detail" v-if="active_btn !== -1">
      <List border size="small" style="overflow-y: auto; max-height: 26rem">
        <ListItem
          v-for="(geometry, index) in currentLayerDetailData.geometries"
          :key="index"
          @click.native="flashGraphic(index)"
          class="detailGraphicListItem"
        >
          {{ index }} 号侵占区块
        </ListItem>
      </List>
      <div
        style="margin: 10rem auto"
        v-show="!currentLayerDetailData.geometries.length"
      >
        <Icon
          style="margin: 0 auto; display: block"
          type="ios-checkmark-circle-outline"
          color="green"
          size="50"
        />
        <p>此图层检查通过，并未侵占</p>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from "@/bus";
import * as echarts from "echarts";
// 这个和图上检查结果的颜色对应，后期可以统一写到配置文件
// 由于目前只有两个地方用到，懒得写
let colors = [
  [162, 68, 137],
  [240, 61, 192],
  [254, 1, 94],
  [231, 13, 17],
];
export default {
  data() {
    return {
      active_btn: -1,
      columnsTitle: [
        {
          title: "图例",
          key: "legend",
          align: "center",
        },
        {
          title: "名称",
          key: "layer",

          align: "center",
        },
        {
          title: "位置关系",
          key: "relation",

          align: "center",
        },
        {
          title: "图例个数(个)",
          key: "legendNums",
          align: "center",
        },
        {
          title: "侵占面积(平米)",
          key: "area",
          width: "55",
          align: "center",
        },
        {
          title: "建议",
          key: "advice",

          align: "center",
        },
      ],
    };
  },
  props: {
    resdata: {
      type: Object,
      required: true,
    },
  },
  computed: {
    currentLayerDetailData() {
      let res = this.resdata.Results.find(
        (result) => result.layer == this.active_btn
      );
      if (res) {
        return res;
      }
      return null;
    },
  },
  methods: {
    flashGraphic(index) {
      console.log(`闪烁${index}要素`);
      this.$emit("flashGraphic", [this.active_btn, index]);
    },
    /**
     * 切换激活页
     * 单击Table组件行时 第二个参数为行号。第一个参数为行数据
     * 单击菜单按钮时，只有第一个参数为图层名 
     * 
     * 
     * 
     */
    showLayerDetailRes(layer, index) {
      console.log(index);
      if (index !== undefined) {
        this.active_btn = layer.layer;
        return;
      }
      this.active_btn = layer;
    },
    backToCheck() {
      Bus.$emit("changeSiderWidth", 340);
      this.$emit("back");
    },
    showPdf() {
      window.open(require(`../../assets/${this.resdata.WordName}`), "_blank");
    },
    preProcessPieData(data) {
      let res = [];
      let count = 0;
      data.Results.forEach((result) => {
        let tempDataItem = {};
        tempDataItem.name = "图层" + result.layer.toString();
        tempDataItem.value = result.area;
        tempDataItem.itemStyle = { color: `rgb(${colors[count].toString()})` };
        res.push(tempDataItem);
        count++;
      });
      return res;
    },
  },
  mounted() {
    // 让事件总线把Sider宽度改成400
    Bus.$emit("changeSiderWidth", 400);
    this.resdata.WordName = "result.pdf";
    // 深拷贝一下
    let copydata = Object.assign({}, this.resdata);

    //  预处理一下，添加颜色之类的
    let data = this.preProcessPieData(copydata);

    // 指定图表的配置项和数据
    var option = {
      backgroundColor: "rgb(250, 250, 250)",
      title: {
        text: "侵占饼状图",
      },
      tooltip: {},
      series: [
        {
          name: "侵占面积",
          type: "pie",
          radius: "50%",
          data: data,
          label: {
            normal: {
              textStyle: {
                color: "#20272F",
              },
            },
          },
        },
      ],
    };

    setTimeout(() => {
      let myChart = echarts.init(document.getElementById("main"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }, 1000);

    // 格式一下数据使表格显示起来更好
    this.resdata.Results.forEach((result) => {
      result.relation = "侵占";
      if (result.area > 10000) {
        let temp = result.area / 10000;
        result.area = temp.toFixed(1) + "万";
      }
      result.legendNums = result.geometries.length;
      result.advice = "合格";
      if (result.area) {
        result.advice = "不合格";
      }
    });
  },
};
</script>

<style lang='scss'>
.table .ivu-table-cell {
  padding: 0 !important;
}
</style>
<style lang='scss' scoped>
.model {
  padding: 0.1rem 0.5rem;
  height: 100%;
  .title {
    #back {
      align-self: start;
    }
    display: flex;
    flex-direction: column;
    #export {
      align-self: flex-end;
    }
  }
  .tabs {
    margin-top: 0.25rem;
    .active-button {
      background: rgb(130, 238, 255);
      color: rgb(31, 34, 34);
      font-weight: bold;
    }
    .center-Button {
      border-left: none;
    }
  }
  .table {
    margin-top: 1rem;
  }
  .pie {
    margin-top: 1rem;
    #main {
      width: 100%;
      height: 12rem;
    }
  }
  .detail {
    display: flex;
    height: 26rem;
    justify-content: flex-start;
    flex-direction: column;
    padding-top: 2rem;
    .detailGraphicListItem {
      cursor: pointer;
      &:hover {
        transform: scale(1, 1.2);
        color: rgb(130, 238, 255);
        background: rgb(152, 156, 160);
      }
    }
  }
}
</style>